{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣 - 注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#41ac52', // 豆瓣绿色
                        secondary: '#f5f5f5',
                        accent: '#ff742a',
                        dark: '#333333',
                        light: '#f7f7f7',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    screens: {
                        'xs': '360px',
                        'sm': '640px',
                        'md': '768px',
                        'lg': '1024px',
                        'xl': '1280px',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .scale-hover {
                @apply hover:scale-105 transition-all duration-300;
            }
        }
    </style>
    <style>
        /* 全局样式 - 修改body背景为本地图片 */
        body {
            background-color: #080b30; /* 统一页面底色 */
            background-image: url('{% static "img/2025.5.隠岐FX2-2.jpg" %}');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
    </style>
</head>
<body class="font-sans text-dark min-h-screen flex flex-col">
    <!-- 主要内容 -->
    <main class="flex-grow flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-10">
        <div class="container max-w-6xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <!-- 移动端展示的顶部图片 -->
                <div class="relative h-48 md:hidden overflow-hidden">
                    <img 
                        src="{% static 'img/bg.jpg' %}" 
                        alt="豆瓣背景图" 
                        class="w-full h-full object-cover"
                    >
                    <div class="absolute inset-0 from-primary/80 to-primary/40 flex items-center justify-center">
                        <div class="text-white text-center p-6">
                            <h2 class="text-2xl font-bold mb-2 text-shadow">欢迎加入豆瓣</h2>
                            <p class="text-base opacity-90 max-w-md mx-auto">连接志同道合的朋友，发现你感兴趣的内容</p>
                        </div>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2">
                    <!-- 桌面端展示的左侧图片区域 -->
                    <div class="hidden md:block relative h-auto overflow-hidden">
                        <img 
                            src="{% static 'img/bg.jpg' %}" 
                            alt="豆瓣背景图" 
                            class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
                        >
                        <div class="absolute inset-0 from-primary/80 to-primary/40 flex items-center justify-center">
                            <div class="text-white text-center p-8">
                                <h2 class="text-3xl font-bold mb-4 text-shadow">欢迎加入豆瓣</h2>
                                <p class="text-xl opacity-90 max-w-md mx-auto">连接志同道合的朋友，发现你感兴趣的内容</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧注册区域 -->
                    <div class="p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center">
                        <div class="animate-fadeIn">
                            <div class="text-center mb-6 sm:mb-8">
                                <div class="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-primary/10 mb-4">
                                   <img style="border-radius: 25px" src="/static/img/67.jpg" alt="豆瓣Logo" class="w-10 h-10 sm:w-12 sm:h-12">
                                </div>
                                <h2 class="text-2xl font-bold mb-2">注册豆瓣</h2>
                                <p class="text-gray-600">请输入账号密码注册</p>
                            </div>
                            
                            <!-- 注册表单 -->
                            <form action="{% url 'app:register' %}" method="post" class="space-y-4 sm:space-y-5 animate-fadeIn delay-100">
                                {% csrf_token %}
                                
                                <div class="space-y-2">
                                    <label for="username" class="block text-sm font-medium text-gray-700">账号</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-user text-gray-400"></i>
                                        </div>
                                        <input 
                                            type="text" 
                                            name="username" 
                                            placeholder="请输入账号" 
                                            class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-gray-300 shadow-sm transition-custom input-focus"
                                        >
                                        <div class="error text-red-500 text-sm mt-1">{{ form.errors.username }}</div>
                                    </div>
                                </div>
                                
                                <div class="space-y-2">
                                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-lock text-gray-400"></i>
                                        </div>
                                        <input 
                                            type="password" 
                                            name="password" 
                                            placeholder="请输入密码" 
                                            class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-gray-300 shadow-sm transition-custom input-focus"
                                        >
                                        <div class="error text-red-500 text-sm mt-1">{{ form.errors.password }}</div>
                                    </div>
                                </div>
                                
                                <button 
                                    type="submit" 
                                    class="w-full py-2.5 sm:py-3 px-6 bg-primary hover:bg-primary/90 text-white rounded-lg text-center font-medium transition-custom shadow-lg shadow-primary/20 flex items-center justify-center scale-hover"
                                >
                                    <span>注册</span>
                                    <i class="fa fa-arrow-right ml-2"></i>
                                </button>
                            </form>
                            
                            <!-- 链接区域 -->
                            <div class="flex justify-between mt-6 animate-fadeIn delay-200">
                                <a href="{% url 'app:login' %}" class="text-sm text-primary hover:text-primary/80 transition-custom flex items-center">
                                    <i class="fa fa-sign-in mr-1"></i> 已有账号？登录
                                </a>
                                <a href="{% url 'app:index' %}" class="text-sm text-primary hover:text-primary/80 transition-custom flex items-center">
                                    <i class="fa fa-home mr-1"></i> 首页
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- JavaScript -->
    <script>
        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });

        // 添加页面载入动画
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.animate-fadeIn');
            elements.forEach(el => {
                el.style.opacity = '0';
                setTimeout(() => {
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }, el.classList.contains('delay-100') ? 100 : 
                   el.classList.contains('delay-200') ? 200 : 
                   el.classList.contains('delay-300') ? 300 : 0);
            });
        });
    </script>
</body>
</html>